import { useContext } from "react";
import "./index.scss";
import logoSvg from "@/assets/react.svg";
import { PlaygroundContext } from "../../PlaygroundContext";
import classNames from "classnames";
import { MoonOutlined, SunOutlined } from "@ant-design/icons";

export default function Header() {

	const {
		theme,
		setTheme
	} = useContext(PlaygroundContext)

	return (
		<div className={classNames("header", theme)}>
			<div className={"logo"}>
				<img alt="logo" src={logoSvg} />
				<span>React Playground</span>
			</div>
			<div >
				{theme === 'light' && (
					<MoonOutlined
						title='切换暗色主题'
						className={theme}
						onClick={() => setTheme('dark')}
					/>
				)}
				{theme === 'dark' && (
					<SunOutlined
						title='切换亮色主题'
						className={theme}
						onClick={() => setTheme('light')}
					/>
				)}
			</div>
		</div>
	);
}
